.top
  padding: ($wrapper-default-padding / 2) 0
  background: $top-background-color
  color: $top-text-color
  line-height: 2

.top__header
  position: absolute
  font: inherit
  font-weight: 500

.top__nav
  text-align: right

  .label
    margin-left: 5px
    text-transform: uppercase
    position: relative
    top: -2px

$announcement-height: 40px
@media (min-width: $breakpoint-narrow)
  .top
    position: fixed
    z-index: 1
    right: 0
    left: 0
    padding: 1rem 0
    border-bottom: 1px solid darken($top-background-color, 4%)
    background: rgba($top-background-color, 0.9)
    line-height: 1
    -webkit-font-smoothing: subpixel-antialiased

    .announcement + &
      top: $announcement-height

  .top__nav__item
    display: inline-block

    & + &
      margin-left: 1.75rem


.announcement
  position: fixed
  z-index: 2
  top: 0
  width: 100%
  background: $brand-light-yellow
  height: $announcement-height
  line-height: 40px
  text-align: center
